<template>
	<view class="">
		<u-navbar :is-back="true" :border-bottom="false" title="设备租赁" height="46" title-color="#333" :title-bold="true"
			:title-size="36">
			<view class="navbar_wap">
				<view class="navbar-right">
					<u-icon name="search" color="#C40200" size="45" class="search_logo" @click="goSearch"></u-icon>
					<u-icon name="scan" color="#C40200" size="45" @click="scancode"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="device_box">
			<home-notice :notice="devicelist" style="margin-bottom: 38rpx;" @goDetail="goDetail"></home-notice>
			<view class="atlas_img">
				<image src="@/static/index/device/banner_nav.png" mode="widthFix"></image>
			</view>
			<view class="device_nav">
				<view class="" @click="Devicereveal">
					<image src="@/static/index/device/sbzx.png" mode="widthFix"></image>
				</view>
				<view class="" @click="popupShow = true">
					<image src="@/static/index/device/gzfb.png" mode="widthFix"></image>
				</view>
				<view class="" @click="goMerchantSettlement">
					<image src="@/static/index/device/sjrz.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- <view class="atlas_img" @click="Devicescene">
				<image src="@/static/index/device/banner_yycj.jpg" mode="widthFix"></image>
			</view> -->
		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="dropdown-warp">
			<view class="dropdown-box" @click="backTop"></view>
			<HMfilterDropdown :filterData="filterData" :defaultSelected="defaultSelected" @confirm="confirm"
				:updateMenuName="true" id="dropdown"></HMfilterDropdown>
		</view>
		<device-iist :devicelist="devicelist"></device-iist>
		<view class="eject" v-show="popupShow" @click="popupShow = false">
			<view class="eject-con">
				<view class="eject-con-oval u-flex u-row-between">
					<view class="">
						<image src="/static/common/pub_03.jpg" mode="widthFix" @click.stop="goDemandRelease()"></image>
						<view class="eject-text">需求发布</view>
					</view>
					<view class="">
						<image src="/static/common/pub_05.png" mode="" @click.stop="goAddDevice()"></image>
						<view class="eject-text">租售发布</view>
					</view>
				</view>
				<view class="eject-con-squa u-flex u-col-center u-row-center">
					<u-icon name="close" size="40" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-loadmore status="没有更多数据" style="padding-top: 30rpx;" v-if="loadshow" />
	</view>
</template>

<script>
	import HomeNotice from "@/components/common/HomeNotice.vue"
	import DeviceList from "./childComps/DeviceList.vue"
	import provinces from "uview-ui/libs/util/province.js";
	import poent from "@/common/poent.js"
	import HMfilterDropdown from "@/components/common/HM-filterDropdown.vue"
	export default {
		data() {
			return {
				colid: '',
				devicelist: [],
				filterData: [{
						"name": '地区',
						"type": 'radio',
						"iconName": "ditu_dingwei",
						"iconSize": 26,
						"submenu": [{
							'name': "地区",
							'submenu': []
						}]
					},
					{
						"name": '类别',
						"type": 'hierarchy-column',
						"iconName": "ziyuan29",
						"iconSize": 26,
						"submenu": []
					},
					{
						"name": '筛选',
						"type": 'radio',
						"iconName": "shaixuan1",
						"iconSize": 26,
						"submenu": [{
							'name': "筛选",
							'submenu': [],
						}, ]
					},
				],
				defaultSelected: [],
				pagesize: 4,
				sbqyshow: "",
				yycj: "",
				popupShow: false,
				scrollTop: 0,
				loadshow: false,
			}
		},
		onLoad() {
			this.device()
			this.Pratype()
		},
		onReachBottom() {
			if (this.pagesize <= this.devicelist.length) {
				this.pagesize = this.pagesize + 4
				this.device()
			}
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			this.scrollTop = e.scrollTop;
		},
		methods: {
			backTop() {
				uni.navigateTo({
					url: "/pages/HomeLnner/DeviceReveal/DeviceReveal"
				})
			},
			goDemandRelease() {
				if (this.$store.state.token) {
					uni.navigateTo({
						url: "/pages/HomeLnner/demand-release/demand-release"
					})
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						url: '/pages/myuser/user/UserInfo'
					})
				}
			},
			async device() {
				let params = {
					cmd: 'nDevice_list_proc',
					para: {
						"pageindex": 1,
						"pagesize": this.pagesize,
						"sbqyshow": this.sbqyshow,
						"colid": this.colid,
						"yycj": this.yycj
					}
				}
				const res = await this.$u.api.device(params)
				this.devicelist = res.Data.Data
				for (var value of this.devicelist.values()) {
					value.img = this.baseUrl + value.img
					value.sbqy = value.sbqy.slice(0, 2)
					value.sbqy = provinces.filter(item => item.value == value.sbqy)[0].label
				}
				if (this.pagesize > this.devicelist.length) {
					this.loadshow = true
				}
			},
			async Pratype() {
				let params = {
					cmd: 'nDevice_list_proc',
					para: {
						"pageindex": 1,
					}
				}
				let paramsc = {
					cmd: 'nSceneColumn_list',
					para: {
						"pageindex": 1,
					}
				}
				const res = await this.$u.api.PraDetails(params)
				this.type = res.Data.Datas3
				this.type = this.type.filter(item => item.pid == 0)
				for (var value of this.type.values()) {
					value.submenu = res.Data.Datas3.filter(item => item.pid == value.id)
					for (var value of value.submenu.values()) {
						value.submenu = res.Data.Datas3.filter(item => item.pid == value.id)
					}
				}
				const yycjData = await this.$u.api.PraDetails(paramsc)
				// console.log(poent)
				this.filterData[0].submenu[0].submenu = poent
				this.filterData[1].submenu = this.type
				this.filterData[1].submenu = JSON.parse(JSON.stringify(this.type).replace(/id/g, "value"))
				this.filterData[2].submenu[0].submenu = JSON.parse(JSON.stringify(yycjData.Data.Data).replace(/id/g,
					"value"))
			},
			confirm(e) {
				this.loadshow = false
				this.pagesize = 4
				this.colid = e.value[1][e.value.length - 1] ? e.value[1][e.value.length - 1] : e.value[1][e.value.length -
					2
				]
				this.sbqyshow = e.value[0][0][0] ? e.value[0][0][0] + "0000" : ""
				this.yycj = e.value[2][0][0] ? e.value[2][0][0] : ""
				this.device()
			},
			scancode() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

					}
				});
			},
			Devicescene() {
				this.$u.route('/pages/HomeLnner/DeviceScene/DeviceScene');
			},
			Devicereveal() {
				this.$u.route('/pages/HomeLnner/DeviceReveal/DeviceReveal');
			},
			goMerchantSettlement() {
				uni.navigateTo({
					url: "/pages/HomeLnner/merchant-settlement/merchant-settlement"
				})
			},
			goAddDevice() {
				if (this.$store.state.token) {
					uni.navigateTo({
						url: "/pages/HomeLnner/add-device/add-device"
					})
				} else {
					this.$refs.uToast.show({
						title: '请先登录',
						url: '/pages/myuser/user/UserInfo'
					})
				}

			},
			goSearch() {
				uni.navigateTo({
					url: "/pages/HomeLnner/search/search"
				})
			},
			goDetail(item) {
				this.$u.route('/pages/HomeLnner/DeviceDetails/DeviceDetails', {
					id: item.id
				});
			}
		},
		components: {
			"home-notice": HomeNotice,
			"device-iist": DeviceList,
			'HMfilterDropdown': HMfilterDropdown
		}
	}
</script>

<style scoped lang="scss">
	.navbar_wap {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 30rpx;

		.navbar-right {
			.search_logo {
				margin-right: 30rpx;
			}
		}
	}

	.dropdown-warp {
		position: relative;

		.dropdown-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 9999;
			height: 100%;

		}
	}

	.device_box {
		padding: 0 30rpx;
		margin-bottom: 35rpx;


		.atlas_img {
			border-radius: 5rpx;
			overflow: hidden;

			image {
				width: 100%;
			}
		}

		.device_nav {
			display: flex;
			justify-content: space-between;
			margin-top: 35rpx;

			image {
				width: 200rpx;
			}
		}
	}

	// 弹出层
	.eject {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		z-index: 10073;
		transition: all 0.25s ease-in-out 0s;

		// transform: scale(1, 1);
		.eject-con,
		.eject-con-active {
			position: absolute;
			bottom: 0;
			height: 434rpx;
			width: 100%;
			background-image: linear-gradient(to top, #f7efed, #e6ecf8);
			border-top-left-radius: 200px 40px;
			border-top-right-radius: 200px 40px;

			.eject-con-oval {
				width: 400rpx;
				height: 162rpx;
				margin: 82rpx auto;

				image {
					width: 106rpx;
					height: 106rpx;
				}

				.eject-text {
					font-size: 24rpx;
					margin-top: 30rpx;
				}
			}

			.eject-con-squa {
				width: 60rpx;
				height: 60rpx;
				margin: 0 auto;
			}
		}
	}
</style>
